<template>
  <div>
    <div class="image-container">
      <img src="../assets/images/13.jpeg">
    </div>
    <div class="text-container">
      <p class="appellation">
        <span>亲爱的亲戚、朋友们</span>
      </p>
      <p class="hello text-left">
        <span>大家好:</span>
      </p>
      <p class="paragraph text-left">
        <span class="paragraph">首先邀请您百忙之中参加工藤新一先生和毛利兰女士的婚礼，在此对大家表示衷心的感谢，谢谢大家!</span>
      </p>
      <p class="paragraph text-left">
        <span class="paragraph">今天，是我们人生中最重要的时刻，在今天，处处充满了甜蜜、喜悦、幸福与感动，今天将是我们人生中最难忘的时刻，将成为我一辈难以忘怀的回忆。</span>
      </p>
    </div>
    <div class="flower-container">
      <img class="flower-container-left" src="../assets/hua2.jpg" width="100" height="100">
      <img class="flower-container-center" src="../assets/hua2.jpg" width="100" height="100">
      <img class="flower-container-right" src="../assets/hua2.jpg" width="100" height="100">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.image-container {
  margin: 2rem;
  border: 0.25rem dashed pink;
  img {
    position: relative;
    top: 0;
    width: 100%;
    height: 30vh;
    animation: fromTop 1s ease 1;
  }
}
@keyframes fromTop {
  from {
    top: -10rem;
  }
  to {
    top: 0;
  }
}
.text-container {
  position: relative;
  animation: fromBottom 1s ease 1;
  bottom: 0;
  .appellation {
    position: relative;
    right: 0;
    font-size: 1.2rem;
  }
  .text-left {
    font-size: 1rem;
    text-align: left;
  }
  .paragraph {
    text-indent: 35px;
  }
}
@keyframes fromBottom {
  from {
    bottom: -10rem;
  }
  to {
    bottom: 0;
  }
}
.flower-container {
  // &-left{
  //   animation: clockwise 3s linear infinite;
  // }
  // &-right{
  //   animation: clockwise 3s linear infinite;
  // }
}
@keyframes clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
</style>
